<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>Parse Playground</title>
  </head>
  <body>
    {{#if url}}
      <div class='container'>
        <div class='row'>
          <h2>Parse Result for {{url}}</h2>
          <hr />
        </div>
        <div class='row'>
          <div class='col' style='width: 10rem; border: gray 1px solid; margin: 0.5rem'>
            <h3>Markdown</h3>
            <pre style='word-wrap: break-word;'>{{doc}}</pre>
          </div>
          <div class='col' style='width: 10rem; border: gray 1px solid; margin: 0.5rem'>
            <h3>Chunks</h3>
            {{#each chunks}}
              <div class='card' style='margin-top: 1rem;'>
                <div class='card-body'>
                  <pre style='word-wrap: break-word;'>{{this}}</pre>
                </div>
              </div>
            {{/each}}
          </div>
        </div>
      </div>
    {{else}}
      <div class='ui-state-default ui-corner-all' title='.ui-icon-plusthick'>
        <div><a href='{{url}}'>View</a></div>
      </div>
    {{/if}}
  </body>
</html>

<style>
  pre { white-space: pre-wrap; word-wrap: break-word; }
</style>

<link
  href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'
  rel='stylesheet'
  integrity='sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH'
  crossorigin='anonymous'
/>
<script
  src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js'
  integrity='sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz'
  crossorigin='anonymous'
></script>